<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="showTel">查看联系方式</button>
    <!-- 写两个按钮，一个为修改名字，一个为修改年龄 --> 
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<script setup lang="ts" name="Person">
    import { ref } from 'vue'

    let name = ref('张三')
    let age = ref(18)
    let tel = '12345678901'
    //方法
    function showTel() {
        alert(tel)
    }
    function changeName() {
        name.value = 'zhangsan'
    }
    function changeAge() {
        age.value += 1
    }
</script>

<style scoped>
.person {
    /* 背景颜色 */
    background-color: skyblue;
    /* 阴影 */
    box-shadow: 0 0px 10px;
    /* 圆角 */
    border-radius: 4px;
    padding: 20px; /* 内边距 */
}
button { 
    margin: 0 5px;
}
</style>


